<template>
  <el-table :data="stocks" stripe style="width: 100%" highlight-current-row>
    <el-table-column prop="name" label="名称" width="150" />
    <el-table-column prop="symbol" label="代码" width="100" />
    <el-table-column prop="change_percent" label="涨幅 (%)" width="100">
      <template #default="{ row }">
        <span :style="{ color: row.change_percent > 0 ? 'red' : 'green' }">
          {{ row.change_percent.toFixed(2) }}%
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="volume" label="成交量 (万)" />
  </el-table>
</template>

<script setup>
defineProps(['stocks'])
</script>
